<template>
  <div class="container">
    <div ref="chartContainer" style="width:100%;height:100%"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick,shallowRef } from 'vue';
import * as echarts from 'echarts';
const chartContainer = ref<any>(null);
const chartInstance = shallowRef()
const propsRef = defineProps(['hardwareEcharts'])
const props = ref<any>(propsRef)

const loadData = (value1: any, value2: any, value3: any, value4: any, value5: any, value6: any) => {
  // chartContainer.value.removeAttribute('_echarts_instance_')
  chartInstance.value = echarts.init(chartContainer.value);

  const option = {
    tooltip: {  // tooltip 用于控制鼠标滑过或点击时的提示框
      trigger: 'axis',
      backgroundColor: '#fff',
      textStyle: {
        color: '#595959',
        fontSize: 12
      },
      axisPointer: { // 坐标轴指示器配置项。  
        type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。 
        axis: 'auto', // 指示器的坐标轴。   
        snap: true, // 坐标轴指示器是否自动吸附到点上  
        lineStyle: {
          color: '#FF9735',
          type: 'solid',
          width: 1
        }
      },
      position: function (point: any, params: any, dom: any, rect: any, size: any) {
        return {
          top: point[1],
          left: point[0] - size.contentSize[0] / 2
        };
      },
      formatter: (params: any) => {
        let tooltipHtml = '';
        params.forEach((item: any) => {
          tooltipHtml += `<div style="line-height:18px;font-weight:400;text-align:center;margin-left:10px;display:flex;align-items: center; "> 
            <div style="width:10px;height:10px;background-color:${item.color};  border-radius: 50%;margin-right:5px"></div>
            ${item.seriesName}   :  ${item.value}% 
            </div>`;
        });
        return tooltipHtml + `<p style="text-align:center;">${params[0].axisValue}</p>`;
      },
      extraCssText: 'width: 160px'
      // showContent: true,

    },
    // tooltip: {
    //     trigger: 'axis',
    //     axisPointer: {
    //       type: 'cross'
    //     },
    //     backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //     position: function (pos, params, el, elRect, size) {
    //       var obj = { top: 10 };
    //       obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
    //       return obj;
    //     },
    //     extraCssText: 'width: 300px'
    //   },
    legend: {
      show: true,
      top: 0,
      right: 120,
      itemWidth: 20, // 图例图标的宽度
      itemHeight: 0, // 图例图标的高度
      data: ['CPU使用率', 'GPU使用率', '内存使用率', '硬盘使用率', '网络使用率']
    },
    xAxis: {
      type: 'category',
      data: value1,
      axisLine: {
        onZero: true
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisTick: {
        show: true,
        alignWithLabel: true,
        interval: 20
      },
      axisLabel: {
        show: true,
        onZero: true,
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: 'CPU使用率',
        data: value2,
        type: 'line',
        smooth: true,  // 设置折线平滑
        symbol: 'none',  // 隐藏折点
        symbolSize: 0,  // 系列标记大小
        lineStyle: {
          color: '#F2994A'  // 系列线条颜色
        },
        itemStyle: {
          color: '#F2994A'  // 系列标记颜色
        },
      },
      {
        name: 'GPU使用率',
        data: value3,
        type: 'line',
        smooth: true,  // 设置折线平滑
        symbol: 'none',  // 隐藏折点
        lineStyle: {
          color: '#E7B400'  // 系列线条颜色
        },
        itemStyle: {
          color: '#E7B400'  // 系列标记颜色
        },
      },
      {
        name: '内存使用率',
        data: value4,
        type: 'line',
        smooth: true,  // 设置折线平滑
        symbol: 'none',  // 隐藏折点
        lineStyle: {
          color: '#1AA367'  // 系列线条颜色
        },
        itemStyle: {
          color: '#1AA367'  // 系列标记颜色
        },
      },
      {
        name: '硬盘使用率',
        data: value5,
        type: 'line',
        smooth: true,  // 设置折线平滑
        symbol: 'none',  // 隐藏折点
        lineStyle: {
          color: '#128DFF'  // 系列线条颜色
        },
        itemStyle: {
          color: '#128DFF'  // 系列标记颜色
        },
      },
      {
        name: '网络使用率',
        data: value6,
        type: 'line',
        smooth: true,  // 设置折线平滑
        symbol: 'none',  // 隐藏折点
        lineStyle: {
          color: '#F24A9B'  // 系列线条颜色
        },
        itemStyle: {
          color: '#F24A9B'  // 系列标记颜色
        },
      }
    ],
    markLine: {
      symbol: ['line'],
      symbolSize: [1, 0]
    }
  };
  chartInstance.value.setOption(option);
};

watch(props, newvalue => {
  loadData(
    newvalue.hardwareEcharts.ReportTime,
    newvalue.hardwareEcharts.CPUsUsage,
    newvalue.hardwareEcharts.GPUsUsage,
    newvalue.hardwareEcharts.MemoryUsage,
    newvalue.hardwareEcharts.DiskUsage,
    newvalue.hardwareEcharts.NetworkUsage,
  )
}, {
  deep: true
})
onMounted(() => {
  if (props.value.hardwareEcharts.ReportTime) {
    loadData(props.value.hardwareEcharts.ReportTime, props.value.hardwareEcharts.CPUsUsage, props.value.hardwareEcharts.GPUsUsage, props.value.hardwareEcharts.MemoryUsage, props.value.hardwareEcharts.DiskUsage, props.value.hardwareEcharts.NetworkUsage)
  }
})
</script>

<style scoped lang="less">
:deep(.container .graph-container .container .right-container .no-data[data-v-49ba7211]) {
  padding-top: 0px;
}

.container {
  width: 100%;
  height: 520px;

}
</style>